<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Item - Reorder</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>

<body>
  <ion-app>

    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Item Reorder</ion-title>
        <ion-buttons slot="primary">
          <ion-button onclick="toggle()">Edit</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content id="content">
      <ion-list>
        <ion-reorder-group id="reorderGroup"></ion-reorder-group>
      </ion-list>

      <ion-list>
        <ion-list-header>
          <ion-label>
            Start
          </ion-label>
        </ion-list-header>
        <ion-reorder-group id="startGroup"></ion-reorder-group>
      </ion-list>

      <ion-list>
        <ion-list-header>
          <ion-label>
            End
          </ion-label>
        </ion-list-header>
        <ion-reorder-group id="endGroup"></ion-reorder-group>
      </ion-list>
    </ion-content>

  </ion-app>

  <style>
    .item {
      background-color: inherit;
    }
  </style>

  <script>
    var isReordering = false;
    var groups = [
      {
        id: 'reorderGroup',
        sliding: false
      }, {
        id: 'startGroup',
        sliding: true,
        side: 'start'
      }, {
        id: 'endGroup',
        sliding: true,
        side: 'end'
      }
    ];
    for (var i = 0; i < groups.length; i++) {
      initGroup(groups[i]);
    }
    function clickedButton(number) {
      console.log('clicked', number);
    }
    function toggle() {
      isReordering = !isReordering;
      for (var i = 0; i < groups.length; i++) {
        var groupEl = document.getElementById(groups[i].id);
        groupEl.disabled = !isReordering;
      }
    }
    function initGroup(group) {
      var groupEl = document.getElementById(group.id);
      groupEl.addEventListener('ionItemReorder', function (ev) {
        ev.detail.complete();
      });
      var groupItems = [];
      for (var i = 0; i < 5; i++) {
        groupItems.push(i);
      }
      if (group.sliding) {
        groupEl.side = group.side;
        renderSlidingGroup(group, groupEl, groupItems);
      } else {
        renderGroup(groupEl, groupItems);
      }
    }
    function renderGroup(groupEl, items) {
      let innerHTML = '';
      for (var i = 0; i < items.length; i++) {
        const index = items[i];
        innerHTML += `
          <ion-item onClick="clickedButton(${index})"
            style="min-height: ${index * 2 + 35}px; --background: rgb(${255 - index * 4}, ${255 - index * 4}, ${255 - index * 4})">
            ${index}
            <ion-reorder slot="end"></ion-reorder>
          </ion-item>`;
      }
      groupEl.innerHTML = innerHTML;
    }
    function renderSlidingGroup(group, groupEl, items) {
      let innerHTML = '';
      for (var i = 0; i < items.length; i++) {
        innerHTML += `
          <ion-item-sliding>
            <ion-item onclick="clickedButton(${i})">
              <ion-reorder slot="${group.side}"></ion-reorder>
              <ion-label>
                <h2>Sliding item ${i}</h2>
              </ion-label>
              <div slot="end">right</div>
            </ion-item>
            <ion-item-options side="end">
              <ion-item-option color="danger">
                <ion-icon name="trash" slot="start"></ion-icon>
                Remove
              </ion-item-option>
            </ion-item-options>
          </ion-item-sliding>`;
      }
      groupEl.innerHTML = innerHTML;
    }
  </script>

</html>
